import {Constant, BaseEcharts} from "@/echarts/BaseEcharts";
import dayjs from 'dayjs';

/**
 * 项目类型
 */
export class ProjectTypeChart extends BaseEcharts {

    constructor(dom) {
        super(dom);
        this.type = Constant.TYPE.PIE;
    }

    //****************饼状
    _configPieData(raw = []) {
        let data = [];
        for (let item of raw) {
            data.push({
                name: item.name,
                value: item.value
            });
        }
        return data
    }

    createPie(data) {
        this.option = {
            // title: {
            //     text: 'Referer of a Website',
            //     subtext: 'Fake Data',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
                // top: "top"
            },
            series: [
                {
                    name: '项目类型',
                    type: 'pie',
                    radius: '80%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }

    changeChartType(type) {
        this.create(this.raw, type)
    }

}


/**
 * 项目状态分组
 */
export class ProjectStatusChart extends BaseEcharts {

    constructor(dom) {
        super(dom);
        this.type = Constant.TYPE.BAR;
    }


    //****************柱状
    _configBarData(raw = []) {
        let xAxis = [];
        let data = [];
        for (let item of raw) {
            xAxis.push(item.name);
            data.push(item.value);
        }
        return {
            xAxis,
            data
        }
    }

    createBar(data) {
        this.option = {
            xAxis: {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    interval: 0,//设置横坐标为斜
                    rotate: 0,//文字倾斜角度
                    formatter: function (value) {
                        if (value.length > 4) {
                            value = value.substring(0, 4) + "...";  //截取4个长度，拼接...
                        }
                        return value;
                    },
                },
            },
            tooltip: {
                trigger: 'item'
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                left: '3%',
                right: '6%',
                top: '4%',
                bottom: '3%',
                containLabel: true
            },
            series: [
                {
                    name: '项目状态',
                    data: data.data,
                    type: 'bar',
                    showBackground: true,
                    colorBy: 'data',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }

    changeChartType(type) {
        this.create(this.raw, type)
    }

}

/**
 * 项目部门分组
 */
export class ProjectGroupChart extends BaseEcharts {

    constructor(dom) {
        super(dom);
        this.type = Constant.TYPE.BAR;
    }


    //****************柱状
    _configBarData(raw = []) {
        let xAxis = [];
        let data = [];
        for (let item of raw) {
            xAxis.push(item.name);
            data.push(item.value);
        }
        return {
            xAxis,
            data
        }
    }

    createBar(data) {
        this.option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    interval: 0,//设置横坐标为斜
                    rotate: 0,//文字倾斜角度
                    formatter: function (value) {
                        if (value.length > 4) {
                            value = value.substring(0, 4) + "...";  //截取4个长度，拼接...
                        }
                        return value;
                    },
                },
            },
            tooltip: {
                trigger: 'item'
            },
            grid: {
                left: '3%',
                right: '6%',
                top: '4%',
                bottom: '10%',
                containLabel: true
            },
            dataZoom:[
                {
                    type: "inside", // 在底部
                    show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                    startValue: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
                    endValue: 4, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                    bottom: 10, // 控制滚动条距离底部的位置;
                    height : 10,
                    orient: "vertical",
                    /**
                     不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
                     默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
                     如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
                     */
                    xAxisIndex: [0]
                }
            ],
            series: [
                {
                    name: '项目部门',
                    data: data.data,
                    type: 'bar',
                    showBackground: true,
                    colorBy: 'data',
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        this.myChart.setOption(this.option);
        // window.addEventListener("resize", function (ev) {
        //   this.myChart.resize();
        // });
    }

    changeChartType(type) {
        this.create(this.raw, type)
    }

}
